<div class="page-container">

  <div style="position: relative;" class="pt20">
    <div class="container">
      <div class="clearfix">
        <ng-tree class="pr10" (onChangeCat)="handleUpdated($event)" [option]="option"></ng-tree>
        <mat-radio-group [(ngModel)]="param.shopType" class="mat-primary pr10" (ngModelChange)="shopTypeChange($event)">
          <mat-radio-button value="" [checked]="param.shopType==''" color="primary">全网</mat-radio-button>
          <mat-radio-button value="C店" [checked]="param.shopType=='C店'" color="primary">淘宝</mat-radio-button>
          <mat-radio-button value="商城" [checked]="param.shopType=='商城'" color="primary">天猫</mat-radio-button>
          <mat-radio-button value="天猫国际" [checked]="param.shopType=='天猫国际'" color="primary">天猫国际</mat-radio-button>
          <mat-radio-button value="全球购" [checked]="param.shopType=='全球购'" color="primary">全球购</mat-radio-button>
        </mat-radio-group>

        <mat-form-field class="mp0 pr10">
          <input matInput placeholder="宝贝搜索" [(ngModel)]="param.q">
          <mat-icon matPrefix fontIcon="fa-search" style="color:rgba(0,0,0,.87);font-size: 18px;"></mat-icon>
        </mat-form-field>
        <mat-form-field class="mp0 pr10">
          <input matInput placeholder="店铺Id" [(ngModel)]="param.uid">
          <mat-icon matPrefix fontIcon="fa-search" style="color:rgba(0,0,0,.87);font-size: 18px;"></mat-icon>
        </mat-form-field>

        <button mat-raised-button color="primary" (click)="search()">确定</button>
      </div>
    </div>
    <ngx-busy [busy]="busy"></ngx-busy>
    <div class="container mt10">
      <table class="responsive-table bordered highlight" id="shopExport">
        <thead>
          <tr>
            <th *ngFor="let column of columns;let $index = index" st-sort [st-sort]="column" [st-sort-data]="param" (sortChanged)="sortChanged($event)" [innerHTML]="column.title"> </th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let prod of vm.table.products | paginate: { itemsPerPage: param.rows, currentPage: vm.page, totalItems: vm.table.count,id: 'products_table'};let $index = index;">
            <td>
              <a href="https://item.taobao.com/item.htm?id={{prod.numberId}}" target="_blank">
                <img [src]="prod.picUrl" class="w80">
              </a>
            </td>
            <td style="max-width: 240px;">
              <div class="product-p">
                <a href="javascript:;" class="product-title normal" [title]="prod.title" [innerHTML]="prod.title"></a>
                <!-- taobao -->
                <a class="grey-text" title="去淘宝" href="https://item.taobao.com/item.htm?id={{prod.numberId}}" target="_blank" ><i class="fa fa-external-link cp f16"></i></a>
              </div>
              <p class="nick-p">
                <span class="taobao-icon" [ngClass]="{'icon-service-tianmao':prod.shopType=='商城','icon-service-taobao':prod.shopType=='C店','icon-service-tianmaoguoji':prod.shopType=='天猫国际','icon-fest-quanqiugou':prod.shopType=='全球购'}"></span>
                <a href="javascript:;" class="mr4 normal">{{prod.shopName}}</a>
                <!-- taoabao -->
                <a class="grey-text" title="去淘宝" href="http://store.taobao.com/shop/view_shop.htm?user_number_id={{prod.uid}}" target="_blank" ><i class="fa fa-external-link cp f16"></i></a>
              </p>
            </td>
            <!-- 品牌 -->
            <td>
              <a  class="normal" href="javascript:;" [innerHTML]="prod.brandName || '-'"></a>
            </td>
            <td><span class="text-overflow" [title]="prod.catName | categoryName">{{prod.catName | categoryName}}</span></td>
            <!-- 日销 -->
            <td><span class="tm-yen">¥</span>{{prod.sellMoney | bigNum}}</td>

            <td>{{prod.sellAmount||0 | number:'1.0-0' }}件</td>

            <td><span class="tm-yen">¥</span>{{prod.price | number:'1.0-2'}}元</td>

            <!-- 月销 -->
            <td><span class="tm-yen">¥</span>{{prod.monthSellMoney | bigNum}}</td>

            <td>{{prod.monthSellAmount||0 | number:'1.0-0' }}件</td>

            <td> <span class="tm-yen">¥</span>{{prod.monthPrice | number: '1.0-1'}}元 </td>
            <!-- time -->
            <!-- <td *ngIf="vm.param.newPorduct">{{prod.publishTime | date:'yyyy-MM-dd'}}</td> -->
          </tr>
          <tr *ngIf="vm.table.products.length ==0">
            <td colspan="10" class="center-align">暂无数据</td>
          </tr>
        </tbody>
      </table>
      <pagination-controls class="center-align pt20" id="products_table" (pageChange)="pageChanged($event)" maxSize="9" directionLinks="true" autoHide="true">
      </pagination-controls>
    </div>
  </div>
</div>
